<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<base href="/monitor/asset/" />
<script src="common/js/commonHeadPack.js"></script>
<script src="common/js/header.js"></script>
<script src="common/js/slider.js"></script>
<link rel="stylesheet" href="module/mesos/mesos.css">
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
	<div class="wrapper">
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					服务监控<small>接入框架及运行中服务</small>
				</h1>
				<!-- 路径导航 -->
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i>集群监测</a></li>
					<li class="active">服务监控</li>
				</ol>
			</section>
			<section class="content">
				<div class="row">
					<div class="col-md-3 col-sm-6 col-xs-12">
						<div class="info-box clickInfoBox">
							<span class="info-box-icon bg-maroon"><i
								class="fa fa-fw fa-bullseye"></i></span>
							<div class="info-box-content">
								<span class="info-box-text">CPU调度</span> <span
									class="info-box-number fontSize40" id="cpuTotal_Used">N/A</span>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-12">
						<div class="info-box clickInfoBox" id="yarnNodeInfoBox">
							<span class="info-box-icon bg-red"><i
								class="fa fa-fw fa-tasks"></i></span>

							<div class="info-box-content">
								<span class="info-box-text">GPU调度</span> <span
									class="info-box-number fontSize40" id="gpuTotal_Used">N/A</span>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-12">
						<div class="info-box clickInfoBox" id="yarnNodeInfoBox">
							<span class="info-box-icon bg-red"><i
								class="fa fa-fw fa-tasks"></i></span>

							<div class="info-box-content">
								<span class="info-box-text">内存调度</span> <span
									class="info-box-number fontSize40" id="memTotal_Used">N/A</span>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-12">
						<div class="info-box clickInfoBox" id="yarnAppInfoBox">
							<span class="info-box-icon bg-green"><i
								class="fa fa-fw fa-pie-chart"></i></span>

							<div class="info-box-content">
								<span class="info-box-text">磁盘调度</span> <span
									class="info-box-number fontSize40" id="diskTotal_Used">N/A</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Frameworks -->
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header">
								<h3 class="box-title">系统接入框架</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<table id="activeFrameworksTable" class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>主机</th>
										<th>用户</th>
										<th>名称</th>
										<th>角色</th>
										<th>活跃任务</th>
										<th>CPUs</th>
										<th>GPUs</th>
										<th>内存</th>
										<th>磁盘</th>
										<th>注册时间</th>																													
									</tr>
								</thead>
								<tbody></tbody>
							</table>
							</div>
							<!-- /.box-body -->
						</div>
					</div>
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header">
								<h3 class="box-title">系统运行服务</h3>
							</div>
							<!-- /.box-header -->
							<div class="box-body">
								<table id="marathonFrameworksTable" class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>服务名称</th>
										<th>CPUs</th>
										<th>GPUs</th>
										<th>内存</th>
										<th>磁盘</th>
										<th>实例</th>
										<th>详情</th>
									</tr>
								</thead>
								<tbody></tbody>
							</table>
							</div>
							<!-- /.box-body -->
						</div>
					</div>
				</div>
			</section>
		</div>

		<!-- 详情模板 -->
		<div id="appDetailTemplate">
			<div class="box box-solid box-success">
				<div class="box-header">
					<h3 class="box-title rowBoxTitle">运行实例</h3>
					<div class="box-tools pull-right refreshBtn">
						<span class="btn btn-default"><i class="fa fa-refresh"></i> 刷新</span>
					</div>
				</div>
				<div class="box-body jobListContent">
					<table class="table table-condensed">
						<thead>
							<tr>
								<th>主机</th>
								<th>端口</th>
								<th>id</th>
								<th>状态</th>
							</tr>
						</thead>
						<tbody class="instanceList"></tbody>
					</table>
				</div>
				<div class="overlay">
					<i class="fa fa-refresh fa-spin"></i>
				</div>
			</div>
		</div>

		<script src="common/js/footer.js"></script>
	</div>
	<script src="common/js/commonJSPack.js"></script>
	<script src="plugins/echarts/echarts.js"></script>
	<script src="module/mesos/mesos.js"></script>
</body>
</html>
